import React, { Component } from 'react'
import { View,Text,ListView,Image,ActivityIndicator,TouchableHighlight } from 'react-native'
import axios from 'axios'

import styles from './moive_hot_style'

//正在热映
class MoiveHot extends Component {

    constructor(props) {
        super(props)

        this.state={
            'loaded':false,
            'moiveSource':new ListView.DataSource({
                rowHasChanged:(row1, row2)=>row1 !==row2
            })
        }
    }

    componentDidMount() {
        this.fetData()
    }

    fetData=()=> {
        axios.get('https://api.douban.com/v2/movie/in_theaters').then(res=>{
            if (res.status === 200) {
                this.setState({'loaded':true, 'moiveSource':this.state.moiveSource.cloneWithRows(res.data.subjects)})
            } else {
                console.log('获取数据失败');
            }
        })
    }

    renderRow=(subject)=>{
        return (
            <View style={styles.item}>
                <View style={styles.imgBox}>
                    <Image source={{'uri':subject.images.medium}} style={styles.image} />
                </View>
                <TouchableHighlight  style={styles.subject}
                    onPress={()=>{console.log(subject.title)}}
                >
                <View>
                    <Text style={styles.title}>{subject.title}</Text>
                    <View style={styles.casts}>
                        {subject.casts.map(cast=>(
                            <View style={styles.castItem} key={cast.name}>
                                <Image source={{uri:cast.avatars.medium}} style={styles.avatar} />
                                <Text style={styles.castName}>{cast.name}</Text>
                            </View>
                        ))}
                    </View>
                    <Text style={styles.rat}>{subject.rating.average}</Text>
                    <View style={styles.des}>
                        <Text style={styles.desItem}>类型:{subject.genres}</Text>
                        <Text style={styles.desItem}>收藏:{subject.collect_count}</Text>
                    </View>
                </View>
                </TouchableHighlight>
            </View>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                {!this.state.loaded && <ActivityIndicator size="large" />}
                <ListView
                    renderRow={this.renderRow}
                    dataSource={this.state.moiveSource}
                />
            </View>
        )
    }
}

export default MoiveHot